<template>
    <div class="drone-con">
        <div class="head">
            <p class="head-title">无人机相关数据</p>
        </div>
        <img src="../src/assets/static/image/bg2.png" alt="" class="bg">
        <div class="container">
            <!-- 地图 -->
            <div id="mapcon" class="map"></div>
            <div class="drone-video">
                <img src="../../src/assets/static/image/titlebg.png" alt="" class="bg-t">
                <div class="drone-video-title">1号无人机实时视频</div>
                <div class="video-con">
                    <WebRtcPlayer></WebRtcPlayer>
                </div>
            </div>
            <!-- 总体无人机状况 -->
            <div class="drone-status">
                <!-- 模块标题 -->
                <div class="small-title">
                    <div class="small-title-left">
                        <div class="bar"></div>
                        <p>总体无人机状况</p>
                    </div>
                    <div class="small-title-right">
                        <img src="../src/assets/static/image/drone.png" alt="" class="icon">
                    </div>
                </div>
                <div class="status-con">
                    <div class="status-item">
                        <img src="../src/assets/static/image/statusbg.png" alt="">
                        <div class="status-item-title">无人机总数</div>
                        <div class="status-item-value">6</div>
                    </div>
                    <div class="status-item">
                        <img src="../src/assets/static/image/statusbg.png" alt="">
                        <div class="status-item-title">无人机故障</div>
                        <div class="status-item-value">2</div>
                    </div>
                    <div class="status-item">
                        <img src="../src/assets/static/image/statusbg.png" alt="">
                        <div class="status-item-title">无人机正常</div>
                        <div class="status-item-value">4</div>
                    </div>
                </div>
            </div>
            <!-- 无人机列表 -->
            <div class="drone-list">
                <!-- 模块标题 -->
                <div class="small-title">
                    <div class="small-title-left">
                        <div class="bar"></div>
                        <p>无人机列表</p>
                    </div>
                    <div class="small-title-right">
                        <img src="../src/assets/static/image/drone.png" alt="" class="icon">
                    </div>
                </div>
                <div class="list-con">
                    <div class="list-title">
                        <div class="list-title-item">
                            <img src="../src/assets/static/image/number.png" alt="" class="item-icon">
                            <div>编号</div>
                        </div>
                        <div class="list-title-item">
                            <img src="../src/assets/static/image/area2.png" alt="" class="item-icon">
                            <div>所在区域</div>
                        </div>
                        <div class="list-title-item">
                            <img src="../src/assets/static/image/status.png" alt="" class="item-icon">
                            <div>状态</div>
                        </div>
                        <div class="list-title-item">
                            <img src="../src/assets/static/image/battery.png" alt="" class="item-icon">
                            <div>电量</div>
                        </div>
                        <div class="list-title-item">
                            <img src="../src/assets/static/image/options.png" alt="" class="item-icon">
                            <div>操作</div>
                        </div>
                    </div>
                    <div class="lists">
                        <div class="list-main">
                            <div class="list-item">
                                <div class="list-item-value">
                                    1
                                </div>
                                <div class="list-item-value">
                                    一区
                                </div>
                                <div class="list-item-value">
                                    正常
                                </div>
                                <div class="list-item-value">
                                    50%
                                </div>
                                <div class="list-item-value">
                                    <div class="option">查看</div>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="list-item-value">
                                    2
                                </div>
                                <div class="list-item-value">
                                    一区
                                </div>
                                <div class="list-item-value abnormal">
                                    故障
                                </div>
                                <div class="list-item-value">
                                    66%
                                </div>
                                <div class="list-item-value">
                                    <div class="option">查看</div>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="list-item-value">
                                    3
                                </div>
                                <div class="list-item-value">
                                    二区
                                </div>
                                <div class="list-item-value abnormal">
                                    故障
                                </div>
                                <div class="list-item-value">
                                    50%
                                </div>
                                <div class="list-item-value">
                                    <div class="option">查看</div>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="list-item-value">
                                    4
                                </div>
                                <div class="list-item-value">
                                    二区
                                </div>
                                <div class="list-item-value">
                                    正常
                                </div>
                                <div class="list-item-value">
                                    80%
                                </div>
                                <div class="list-item-value">
                                    <div class="option">查看</div>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="list-item-value">
                                    5
                                </div>
                                <div class="list-item-value">
                                    一区
                                </div>
                                <div class="list-item-value">
                                    正常
                                </div>
                                <div class="list-item-value">
                                    50%
                                </div>
                                <div class="list-item-value">
                                    <div class="option">查看</div>
                                </div>
                            </div>
                            <div class="list-item">
                                <div class="list-item-value">
                                    6
                                </div>
                                <div class="list-item-value">
                                    三区
                                </div>
                                <div class="list-item-value">
                                    正常
                                </div>
                                <div class="list-item-value">
                                    89%
                                </div>
                                <div class="list-item-value">
                                    <div class="option">查看</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 当前查看无人机相关数据 -->
        <div class="drone-nowdata">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>当前为1号无人机数据</p>
                </div>
            </div>
            <div class="drone-nowdata-con">
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/number.png" alt="">
                        <div class="drone-now-title">编号</div>
                    </div>
                    <div class="drone-nowdata-value">1</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/status.png" alt="">
                        <div class="drone-now-title">状态</div>
                    </div>
                    <div class="drone-nowdata-value">正常</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/Y.png" alt="">
                        <div class="drone-now-title">经度</div>
                    </div>
                    <div class="drone-nowdata-value">30.8150541</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/X.png" alt="">
                        <div class="drone-now-title">纬度</div>
                    </div>
                    <div class="drone-nowdata-value">30.8150541</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/colum-height.png" alt="">
                        <div class="drone-now-title">高度(m)</div>
                    </div>
                    <div class="drone-nowdata-value">231231</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/battery.png" alt="">
                        <div class="drone-now-title">电量(%)</div>
                    </div>
                    <div class="drone-nowdata-value">50</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/distance.png" alt="">
                        <div class="drone-now-title">航程(km)</div>
                    </div>
                    <div class="drone-nowdata-value">231231</div>
                </div>
                <div class="drone-nowdata-item">
                    <div class="drone-now-top">
                        <img src="../src/assets/static/image/time.png" alt="">
                        <div class="drone-now-title">续航(h)</div>
                    </div>
                    <div class="drone-nowdata-value">231231</div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script setup>
import WebRtcPlayer from '../components/WebRtcPlayer.vue'
import { ref, onMounted, onUnmounted } from 'vue';
onMounted(() => {
    initMap();
});

// icon为消防车，icon1为灭火器，icon2为巡护人员，icon3为瞭望塔，icon4为无人机，icon5为传感器
//初始化函数
var initMap = function () {
    // var center = new qq.maps.LatLng(39.916527, 116.397128)
    //获取地图显示控件
    var map = new qq.maps.Map(document.getElementById("mapcon"), {
        //加载地图经纬度信息
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 16,                       //设置缩放级别
        draggable: false,
        panControl: false,           //设置是否可以拖拽
        scrollwheel: false,
        zoomControl: false,        //设置是否可以滚动
        disableDoubleClickZoom: true    //设置是否可以双击放大
    });
    // 消防车
    var anchor = new qq.maps.Point(39.916527, 116.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor);
    // 创建标记
    var marker = new qq.maps.Marker({
        icon: icon,
        map: map,
        position: map.getCenter()
    });
    // 灭火器
    var anchor2 = new qq.maps.Point(10.916527, 115.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon2 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor2);
    // 创建标记
    var marker2 = new qq.maps.Marker({
        icon: icon2,
        map: map,
        position: map.getCenter()
    });

    // 巡护人员
    var anchor3 = new qq.maps.Point(99.916527, 114.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon3 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor3);
    // 创建标记
    var marker3 = new qq.maps.Marker({
        icon: icon3,
        map: map,
        position: map.getCenter()
    });

    // 瞭望塔
    var anchor4 = new qq.maps.Point(199.916527, 117.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon4 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor4);
    // 创建标记
    var marker4 = new qq.maps.Marker({
        icon: icon4,
        map: map,
        position: map.getCenter()
    });

    // 无人机
    var anchor5 = new qq.maps.Point(154.916527, 120.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon5 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor5);
    // 创建标记
    var marker5 = new qq.maps.Marker({
        icon: icon5,
        map: map,
        position: map.getCenter()
    });

    // 传感器
    var anchor6 = new qq.maps.Point(288.916527, 121.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon6 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor6);
    // 创建标记
    var marker6 = new qq.maps.Marker({
        icon: icon6,
        map: map,
        position: map.getCenter()
    });
    // 添加提示
    var info = new qq.maps.InfoWindow({
        map: map
    })
    // 获取标记点击事件
    qq.maps.event.addListener(marker2, 'click', function () {
        info.open();
        info.setContent('<div style="text-align:center;white-space:nowrap;' +
            'margin:10px;">1号无人机</div>');
        info.setPosition(new qq.maps.LatLng(39.916527, 116.397128));
        alert(11)
    });
}

</script>

<style scoped>
html,
body {
    position: relative;
    height: 100%;
}

.drone-con {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background: url(../src/assets/static/image/bg2.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #1e2e49;
}

.bg {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: -1;
}

.head {
    position: fixed;
    top: 0;
    left: 0;
    background: url(../src/assets/static/image/head3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 80.5px;
}

.head-title {
    text-align: center;
    font-size: 27.6px;
    line-height: 17.25px;
    color: rgb(95, 218, 255);
}

.plane {
    width: 575px;
    height: 460px;
}

.container {
    height: calc(100%-75px);
    margin-top: 75px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.small-title {
    height: 34.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 21.85px;
    background-color: rgba(36, 74, 126, 0.3);
}

.small-title-left {
    display: flex;
    align-items: center;
}

.bar {
    width: 11.5px;
    height: 34.5px;
    margin-right: 20px;
    box-shadow: 0 0 20px 10px #064574;
    background: linear-gradient(to bottom, #036eb1, #00f4f0);
}

.icon {
    width: 23px;
    height: 23px;
    margin-right: 23px;
}

/* 地图 */
#mapcon {
    margin-left: 5px;
    /*地图(容器)显示大小*/
    width: 1219px;
    height: 685px;
    /* margin: 100px auto; */
    position: absolute;
    top: 92px;
    left: 0;
}

/* 无人视频模块 */
.drone-video {
    position: absolute;
    right: 5.75px;
    top: 92px;
    width: 685px;
    height: 685px;
    color: #fff;
}

.drone-video .bg-t {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.drone-video-title {
    font-weight: 600;
    position: absolute;
    font-size: 23px;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
}

.video-con {
    margin-top: 103.5px;
    padding: 23px;
    height: 552px;
}

/* 总体无人机状况 */
.drone-status {
    box-sizing: border-box;
    position: absolute;
    top: 785px;
    left: 0;
    width: 460px;
    margin-left: 5.75px;
}

.status-con {
    padding: 11.5px;
    height: 230px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.status-item {
    position: relative;
    width: 115px;
    height: 115px;
    color: #fff;
    font-weight: 600;
}

.status-item img {
    box-shadow: 0 0 5.75px 3.45px #00b3f5 inset;
    border-radius: 50%;
    position: absolute;
    left: -5.75px;
    top: -40.25px;
    width: 126.5px;
    height: 126.5px;
}

.status-item-title {
    position: absolute;
    bottom: -23px;
    left: 50%;
    width: 115px;
    text-align: center;
    transform: translateX(-50%);
}

.status-item-value {
    position: absolute;
    top: 5.75px;
    font-size: 27.6px;
    left: 50%;
    color: #00b3f5;
    transform: translateX(-50%);
}

/* 无人机数据列表 */
.drone-list {
    box-sizing: border-box;
    position: absolute;
    top: 785px;
    left: 483px;
    width: 741.75px;
}

.list-con {
    padding: 11.5px 23px;
    height: 230px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.75px solid #036eb1;
    /* display: flex;
    align-items: center;
    justify-content: space-around; */
}

.lists {
    width: 695.75px;
    margin-top: 5.75px;
    overflow: hidden;
}

.list-main {
    width: 726.8px;
    height: 184px;
    overflow: auto;
    color: #fff;
    font-size: 20.7px;
    overflow-y: scroll;
}

.list-item {
    background-color: rgba(36, 74, 126, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    height: 34.5px;
    margin-bottom: 5.75px;
    /* border-bottom: 1px solid #00b3f5; */
}

.list-item-value {
    width: 150.65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    width: 695.75px;
}

.list-title-item {
    display: flex;
    width: 150.65px;
    align-items: center;
    justify-content: center;
}

.item-icon {
    width: 34.5px;
    height: 34.5px;
    margin-right: 11.5px;
}

.option {
    margin: 0 auto;
    width: 57.5px;
    height: 28.75px;
    border-radius: 23px;
    font-size: 17.25px;
    text-align: center;
    color: #2d98be;
    line-height: 28.75px;
    background-color: rgba(36, 74, 126, 0.7);
}

.option:hover {
    background-color: #2d98be;
    color: #fff;
}

.abnormal {
    color: #fd5555;
    font-weight: 600;
}
/* 查看当前无人机数据 */
.drone-nowdata {
    position: absolute;
    width: 690px;
    right: 5.75px;
    top: 785px;
}
.drone-nowdata-con {
    padding: 11.5px;
    height: 230px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.75px solid #036eb1;
    display: flex;
    flex-wrap: wrap;
}
.drone-now-top {
    display: flex;
    align-items: center;
    color: #fff;
}
.drone-now-top img {
    width: 34.5px;
    height: 34.5px;
    margin-right: 11.5px;
}
.drone-nowdata-item {
    width: 156.55px;
    height: 109.25px;
    background-color: rgba(36, 74, 126, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 11.5px;
    margin-bottom: 11.5px;
}
.drone-nowdata-item:nth-child(4) {
    margin-right: 0;
}
.drone-nowdata-item:nth-child(8) {
    margin-right: 0;
}
.drone-nowdata-value {
    font-size: 23px;
    font-weight: 600;
    color: #00b3f5;
    margin-top: 5.75px;
}
</style>